<!-- src/components/FloatingActionButton/FloatingActionButton.vue -->
<template>
  <button
      class="fab"
      :class="[
      sizeClass,
      shapeClass,
      positionClass,
      animationClass,
      { 'fab--disabled': disabled }
    ]"
      :style="{
      backgroundColor: color,
      color: textColor,
      ...positionStyles
    }"
      :disabled="disabled"
      :aria-label="ariaLabel"
      @click="handleClick"
      @mouseenter="handleMouseEnter"
      @mouseleave="handleMouseLeave"
  >
    <!-- 图标显示 -->
    <div v-if="isSvg" class="fab-icon" v-html="icon"></div>
    <i v-else-if="icon" class="fab-icon" :class="icon"></i>

    <!-- 默认插槽 -->
    <slot></slot>

    <!-- 工具提示 -->
    <span v-if="tooltip" class="fab-tooltip">{{ tooltip }}</span>
  </button>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  // 外观相关
  icon: { type: String, default: '' },
  color: { type: String, default: '#007bff' },
  textColor: { type: String, default: '#fff' },
  size: {
    type: String,
    default: 'medium',
    validator: v => ['small', 'medium', 'large'].includes(v)
  },
  shape: {
    type: String,
    default: 'circle',
    validator: v => ['circle', 'square'].includes(v)
  },

  // 位置相关
  position: {
    type: String,
    default: 'bottom-right',
    validator: v => ['bottom-right', 'bottom-left', 'top-right', 'top-left'].includes(v)
  },
  offsetX: { type: Number, default: 0 },
  offsetY: { type: Number, default: 0 },

  // 交互相关
  disabled: { type: Boolean, default: false },
  tooltip: { type: String, default: '' },

  // 动画相关
  animate: { type: Boolean, default: true },
  animationType: {
    type: String,
    default: 'fade',
    validator: v => ['fade', 'scale'].includes(v)
  }
});

const emit = defineEmits(['click', 'mouseenter', 'mouseleave']);

// 计算属性
const isSvg = computed(() => props.icon.startsWith('<svg'));
const ariaLabel = computed(() => props.tooltip || 'Floating Action Button');

// 样式类计算
const sizeClass = computed(() => `fab--${props.size}`);
const shapeClass = computed(() => `fab--${props.shape}`);
const positionClass = computed(() => `fab--${props.position.replace('-', '_')}`);
const animationClass = computed(() =>
    props.animate ? `fab--animate-${props.animationType}` : ''
);

// 位置样式计算
const positionStyles = computed(() => {
  const [vertical, horizontal] = props.position.split('-');
  return {
    [vertical]: `${props.offsetY}px`,
    [horizontal]: `${props.offsetX}px`
  };
});

// 事件处理
const handleClick = (e) => {
  if (!props.disabled) emit('click', e);
};
const handleMouseEnter = (e) => emit('mouseenter', e);
const handleMouseLeave = (e) => emit('mouseleave', e);
</script>

<style scoped>
.fab {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 999;
}

/* 尺寸 */
.fab--small {
  width: 40px;
  height: 40px;
  font-size: 16px;
}
.fab--medium {
  width: 56px;
  height: 56px;
  font-size: 24px;
}
.fab--large {
  width: 64px;
  height: 64px;
  font-size: 32px;
}

/* 形状 */
.fab--circle { border-radius: 50%; }
.fab--square { border-radius: 8px; }

/* 位置 */
.fab--bottom_right { bottom: 0; right: 0; }
.fab--bottom_left { bottom: 0; left: 0; }
.fab--top_right { top: 0; right: 0; }
.fab--top_left { top: 0; left: 0; }

/* 动画 */
.fab--animate-fade { opacity: 0.9; }
.fab--animate-fade:hover { opacity: 1; }
.fab--animate-scale { transform: scale(1); }
.fab--animate-scale:hover { transform: scale(1.1); }

/* 禁用状态 */
.fab--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

/* 工具提示 */
.fab-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.fab:hover .fab-tooltip {
  opacity: 1;
}
.fab--bottom_right .fab-tooltip { right: 100%; top: 50%; transform: translateY(-50%); margin-right: 8px; }
.fab--bottom_left .fab-tooltip { left: 100%; top: 50%; transform: translateY(-50%); margin-left: 8px; }
.fab--top_right .fab-tooltip { right: 100%; bottom: 50%; transform: translateY(50%); margin-right: 8px; }
.fab--top_left .fab-tooltip { left: 100%; bottom: 50%; transform: translateY(50%); margin-left: 8px; }

/* 响应式 */
@media (max-width: 768px) {
  .fab--medium {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}
</style>